<template>
  <Drawer ref="drawerWrapper"
          v-model="value1"
          :width="width"
          v-bind="$attrs"
          :mask="false"
          :closable="false"
          v-on="$listeners">
    <!-- 所有插槽内容显示在这里 ↓ -->

    <template v-for="(slots, slotsName) in $slots">
      <template v-if="slotsName !== 'default'">
        <render-dom v-for="(render, index) in slots"
                    :key="`b_drawer_${slotsName}_${index}`"
                    :render="() => render"
                    :slot="slotsName">
        </render-dom>
      </template>
      <template v-else>
        <div :key="`b_drawer_${slotsName}`" class="body-wrapper">
          <render-dom v-for="(render, index) in slots"
                      :key="`b_drawer_${slotsName}_${index}`"
                      :render="() => render"
                      :slot="slotsName">
          </render-dom>
        </div>
      </template>
    </template>
    <!-- 所有插槽内容显示在这里 ↑ -->
    <div>
      <slot name="trigger">
        <div class="expand-wrapper" :style="wrapperStyle">
          <div class="expand" :style="cStyle" @click="change">
            <Icon :type="type" size="6" :style="nStyle"/>
          </div>
        </div>
      </slot>
    </div>
    <div v-if="$slots.footer"
         class="footer">
      <slot name="footer"></slot>
    </div>
  </Drawer>
</template>f

<script>
import RenderDom from '@/libs/render-dom.js'

export default {
  name: 'expand-drawer',
  components: {
    RenderDom
  },
  computed: {
    nStyle () {
      return {
        position: 'relative',
        [this.placement]: this.placement === 'left' ? (this.open ? '-2px' : '-1px') : (this.open ? '2px' : '1px')
      }
    },
    placement () {
      return this.$attrs.placement
    },
    wrapperStyle () {
      return {
        [this.placement]: this.width + 'px',
        position: this.$attrs.inner ? 'absolute' : 'fixed'
      }
    },
    cStyle () {
      return {
        width: '8px'
      }
    },
    type () {
      return this.placement === 'left' ? (this.open ? 'md-arrow-dropleft' : 'md-arrow-dropright') : (this.open ? 'md-arrow-dropright' : 'md-arrow-dropleft')
    }
  },
  props: {
    width: {
      type: [String, Number],
      default: 256
    }
  },
  data () {
    return {
      value1: true,
      open: true
    }
  },
  methods: {
    change () {
      this.open = !this.open
      this.$refs['drawerWrapper'].$el.getElementsByClassName('ivu-drawer')[0].style.transition = '200ms'
      let tr = `translate3d(` + (this.placement === 'left' ? (this.open ? `0` : `-100`) : (this.open ? `0` : `100`)) + `%, 0, 0)`
      this.$refs['drawerWrapper'].$el.getElementsByClassName('ivu-drawer')[0].style.transform = tr
    }
  }
}
</script>
<style scoped>
  /deep/ .ivu-drawer-body {
    overflow: visible;
  }

  .body-wrapper {
    width: 100%;
    height: 100%;
    padding: 16px;
    overflow: auto;
  }

  .expand-wrapper {
    top: 50%;
    height: 50px;
    width: 0;
    transform: translate(0%, -50%);
    background: #fafafa;
    width: 8px;
  }

  .expand {
    position: absolute;
    left: 0px;
    top: 50%;
    height: 50px;
    background: rgb(243, 243, 243);
    transform: translate(0%, -50%);
    border: none;
    box-shadow: 0 0 1px 1px rgba(0, 0, 0, .2);
    line-height: 50px;
    cursor: pointer;
  }

  .expand:hover {
    background-color: #f8ac59
  }

  /deep/ .ivu-drawer-body {
    padding: 0;
    overflow: visible;
    position: static;
    display: flex;
    flex-direction: column;
  }

  .footer {
    flex-grow: 1;
    width: 100%;
    bottom: 0;
    left: 0;
    border-top: 1px solid #e8e8e8;
    background: #fff;
  }
</style>
